<template>
	<div>
		<grid class="myStuGridTitle" :show-vertical-dividers="false">
			<grid-item @click.native="orderByFunc('name')">
				<span class="grid-center" style="margin-left: 10px;">姓名<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('class_name')">
				<span class="grid-center" style="margin-left: 10px;">学科<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item @click.native="orderByFunc('class_points')">
				<span class="grid-center" style="margin-left: 10px;">课时<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item class="myCusStatus" @click.native="orderByFunc('time')">
				<span class="grid-center-status" style="margin-left: 10px;">状态<img slot="icon" style="width: 13px" src="@/assets/svg/icon_order.svg"></span>
			</grid-item>
			<grid-item>
				<span class="grid-center">排课</span>
			</grid-item>
		</grid>

		<scroller :on-refresh="refresh" :on-infinite="infinite" :noDataText="noDataText" ref="poStudentList">
			<group id="commonScroller" class="commonScrollerMyCustomer">
				<grid class="myStuGrid" v-for="(item,index) in items" :show-vertical-dividers="false">
					<grid-item class="grid-item" @click.native="jumpTo(item.id)">
						<span class="grid-center-name">{{item.name.substring(0,3)}}</span>
					</grid-item>
					<grid-item class="grid-item">
						<span v-if="item.class_name == null" class="grid-center">无</span>
						<span v-else class="grid-center">{{item.class_name}}</span>
					</grid-item>
					<grid-item class="grid-item">
						<span v-if="item.class_points == null" class="grid-center">无</span>
						<span v-else class="grid-center">{{item.class_points}}</span>
					</grid-item>
					<grid-item class="myCusStatus">
						<span v-if="item.time == null" class="grid-center-status">无</span>
						<span v-else class="grid-center-status">{{formatTime(item.time) + '，' + item.comments.substring(0,5)}}</span>
					</grid-item>
					<grid-item class="grid-item" @click.native="newActivity(item,index)">
						<span class="grid-center"><img slot="icon" style="width: 13px;" src="@/assets/svg/icon_new_class.svg"></span>
					</grid-item>
				</grid>
			</group>
		</scroller>

		<div v-transfer-dom>
			<popup v-model="showPopup" height="270px" :hide-on-blur=false is-transparent>
				<div style="width: 95%;background-color:#fff;margin:0 auto;padding-bottom: 5px">
					<flexbox>
						<flexbox-item>
							<x-button class="flexBtn_confirm" @click.native="confirm">确定</x-button>
						</flexbox-item>
						<flexbox-item>
							<x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
						</flexbox-item>
					</flexbox>
				</div>
			</popup>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import DateUtil from '../../../utils/date'
	import NetWorking from '../../../utils/networking'
	import { Loading, Group, Cell, ConfirmPlugin, Tab, TabItem, FormPreview, Grid, GridItem, TransferDom, Popup, Flexbox, FlexboxItem, XButton, XTextarea, Checker, CheckerItem} from 'vux'
	import VueScroller from 'vue-scroller'
	Vue.use(VueScroller)
	Vue.use(ConfirmPlugin)

	const SIZE = 20

	export default {
		name: "scrollerMyCusCustomer",
		components: {
			Loading,
			Group,
			Cell,
			Tab,
			TabItem,
			FormPreview,
			Grid,
			GridItem,
			TransferDom,
			Popup,
			Flexbox,
			FlexboxItem,
			XButton,
			XTextarea,
			Checker,
			CheckerItem
		},
		directives: {
			TransferDom
		},
		props: ['curURL', 'jumpToObjectDetails', 'orderBy','sequence','username','status'],
		data() {
			return {
				isApp: true,
				id: '',
				detail: '',
				hint: '通话详细内容',
				showPopup: false,
				showIfConnected: false,
				action: {name: '再沟通', value: 8},
				actionItems: [{name: '再沟通', value: 8}, {name: '转为准客户', value: 0}, {name: '丢弃', value: '3'}],
				noDataText: '',
				offset: 0,
				limit: SIZE,
				noMoreData: false,
				items: [],
				list: [],
				curItem: '',
				curIndex: 0
			}
		},
		created: function () {
			if(!navigator.userAgent.match('DuoZhaoApp')){
				this.isApp = false
			}
		},
		watch: {
			curURL: function () {
				this.resetData()
			},
			orderBy: function () {
				this.resetData()
			},
			sequence: function () {
				this.resetData()
			},
			status: function () {
				this.resetData()
			}
		},
		methods:{
			confirm: function () {
				this.showPopup = false
			},
			cancel: function () {
				this.showPopup = false
			},
			newActivity (item, index ) {
				this.$router.push({name: 'newLesson', params: {name: item.name, id: item.id}})
			},
			triggerrefresh()
			{
				this.noDataText = ''
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.scrollerTrace.finishPullToRefresh(false)
				this.$refs.scrollerTrace.finishInfinite(false)
				this.infinite(done)
			},
			unconnected: function () {
				let _this = this
				NetWorking.doPost(
					'customertrace',
					null,
					null,
					{
						params: {
							content: '电话未接通' ,
							customerId: this.id
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.detail = ''
							_this.showPopup = false
							_this.updateItem(rs.trace)
						}else{
							alert(rs.error_message)
						}
					}
				)
			},
			updateItem: function (trace) {
				this.items[this.curIndex].time = trace.create_time
				this.items[this.curIndex].comments = trace.content
			},
			jumpTo: function (id) {
				//组件间传递参数
				this.$router.push({ name: "customerDetails", params: { id: id, index: 1}})
			},
			formatTime: function (time) {
				return DateUtil.getTimeWhile(time)
			},
			orderByFunc: function (value) {
				this.orderBy = value
				if(this.sequence == 'asc'){
					this.sequence = 'desc'
				}else{
					this.sequence = 'asc'
				}
				sessionStorage.orderBy = this.orderBy
				sessionStorage.sequence = this.sequence
			},
			resetData() {
				this.noDataText = ''
				this.offset = 0
				this.limit = SIZE
				this.noMoreData = false
				this.items = []
				this.$refs.poStudentList.finishPullToRefresh(false)
				this.$refs.poStudentList.finishInfinite(false)
			},
			refresh (done) {
				this.$refs.poStudentList.finishPullToRefresh(true)
				return
			},
			infinite (done) {
				if(this.noMoreData){
					this.noDataText = '没有更多记录了——总' + this.items.length + '条'
					this.$refs.poStudentList.finishInfinite(true)
					return
				}else{
					let _this = this
					_this.offset += 1
					this.isRunning = true
					NetWorking.doGet(
						this.curURL,
						null ,
						{
							params:{
								offset: _this.offset,
								limit: _this.limit,
								orderBy: _this.orderBy,
								sequence: _this.sequence,
								username: _this.username,
								status: _this.status
							}
						}
					).then(
						response => {
							let res = response.data
							if (res.error_code == 0) {
								if(res.page_info.list.length >= 0){
									_this.items.push.apply(_this.items, res.page_info.list)
									_this.bottom += res.page_info.list.length
									//set noMoreData flag to true if current size < limit
									if(res.page_info.list.length < _this.limit){
										_this.noMoreData = true
										_this.$refs.poStudentList.finishInfinite(true);
									}
								}
							} else {
								alert(res.error_message)
							}
							done()
						}
					)
				}
			}
		}
	}
</script>

<style>
	.commonScrollerMyCustomer{
		margin-top: 122px;
	}

	.myStuGridTitle{
		font-size: 12px;
		background: lightgoldenrodyellow;
		z-index: 10;
	}

	.myStuGridTitle > .weui-grid {
		width: 15% !important;
	}

	.myStuGridTitle > .myCusStatus {
		width: 40% !important;
	}

	.myStuGrid {
		font-size: 12px;
	}

	.myStuGrid > .weui-grid {
		text-decoration: none;
		width: 15% !important;
	}

	.myStuGrid > .myCusStatus {
		width: 40% !important;
	}

	.myStuGrid > .myCusStatus:after{
		border-bottom: 0px solid #D9D9D9 !important;
	}

	.grid-center {
		display: block;
		text-align: center;
		color: #666;
	}

	.myCusStatus > .grid-center-status {
		display: block;
		text-align: center;
		color: #b29a19;
	}

	.grid-center-name{
		display: block;
		text-align: center;
		color: #43abe3;
	}

	.poStudentList {
		margin-top: 76px;
	}

	.poStudentList > .weui-cells:before {
		border-top: none;
	}

	.tag {
		text-align: right;
		background: red;
		width: fit-content;
		color: white;
		padding-left: 5px;
		border-radius: 5px;
		padding-right: 5px;
		font-size: 13px;
	}

	.itemTime {
		display: block;
		-webkit-margin-before: 1em;
		-webkit-margin-after: 1em;
		-webkit-margin-start: 0px;
		-webkit-margin-end: 0px;
		line-height: 1.41176471;
		font-size: 13px;
	}

	.checkDefault {
		border: 1px solid #ececec;
		padding: 5px 5px;
		background-color: white;
		margin-right: 10px;
		font-size: 13px;
		margin-bottom: 10px;
	}

	.checkDefaultSelected {
		background: #ffffff url(../../../assets/img/icon_check.png) no-repeat right bottom;
		border-color: #ff4a00;
	}
</style>